<template>
	<wd-navbar title="添加接口" :bordered="false" placeholder safeAreaInsetTop left-arrow @click-left="handleBack">
	</wd-navbar>

	<wd-form ref="form" :model="model">
		<wd-cell-group border>
			<wd-picker label-width="60px" required :columns="columns" label="类型" v-model="model.type"
				@confirm="handleConfirm" />
			<wd-input label="名称" label-width="60px" prop="name" clearable v-model="model.name" placeholder="请输入接口名称"
				:rules="[{ required: true, message: '请填写接口名称' }]" />
			<wd-input label="地址" label-width="60px" prop="path" clearable v-model="model.path" placeholder="接口请求地址"
				:rules="[{ required: true, message: '请填写接口地址' }]" />
			<wd-input label="备注" label-width="60px" clearable v-model="model.comment" placeholder="备注" />
		</wd-cell-group>
		<view class="footer">
			<wd-button type="primary" size="large" @click="clickSumbit" block>提交</wd-button>
		</view>
	</wd-form>
</template>

<script setup>
	import overallRequest from "@/utool/http/http.js"
	import {
		reactive,
		ref,
		toRaw
	} from 'vue'

	const model = reactive({
		type: 0,
		name: '',
		path: "",
		comment: ""
	})

	const columns = ref([{
			disabled: false,
			label: "GET",
			value: 0,
		}, {
			disabled: false,
			label: "POST",
			value: 1,
		},
		{
			disabled: false,
			label: "DELETE",
			value: 2,
		},
		{
			disabled: false,
			label: "UPDATE",
			value: 3,
		}
	])

	function handleConfirm({
		value
	}) {
		model.type = value
	}
	const form = ref()
	// 点击返回
	function handleBack() {
		uni.navigateBack({})
	}
	// 点击提交
	function clickSumbit() {
		form.value
			.validate()
			.then(({
				valid,
				errors
			}) => {
				if (valid) {
					addAuth()
				}
			})
			.catch((error) => {
				console.log(error, 'error')
			})
	}

	// 添加接口
	function addAuth() {
		let url = "/role/addPathAuth"
		overallRequest(url, {
			method: "POST",
			data: toRaw(model)
		}).then(res => {
			console.log(res);
			
			let {msg} = res
			
			uni.showToast({
				icon:"success",
				title:msg
			})
			
			model.name = ""
			model.path = ""
			model.comment = ""
			
		}).catch(err => {
			console.log(err);
		})
	}
</script>

<style>
	.footer {
		padding: 40rpx 40rpx;
	}
</style>